<template>

    <view class="status-badge" :class="`status${status}`">
        <image class="badge-icon" src="/static/uniapp/calendar.png" mode="aspectFit"></image>
        <text class="badge-text">{{text[status]}}</text>
    </view>
</template>

<script>
  export default {
    // 接受父组件的值
    props: {
      status: String,
      required: true
    },
    data(){
        return {
            text: {
                1: '正常',
                2: '已打卡',
                3: '缺卡',
                4: '请假',
                5: '补卡',
                6: '迟到',
            }
        }
    }
  }
</script>



<style lang="scss" scoped>
.status-badge {
    position: absolute;
    top: 30rpx;
    right: 30rpx;
    background-color: #19B36E;
    border-radius: 100rpx;
    /* padding: 12rpx 20rpx; */
    display: flex;
    align-items: center;

    .badge-icon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 12rpx;
        padding: 16rpx;
        border-radius: 50%;
    }

    .badge-text {
        font-size: 26rpx;
        font-weight: bold;
        color: #fff;
        padding: 0 34rpx 0 22rpx;
    }
}

.status1 {
    background-color: #19B36E;

    .badge-icon {
        background: #65CC9E;
    }
}

.status6 {
    background-color: #F95555;

    .badge-icon {
        background: #FB8D8D;
    }
}

.status4 {
    background-color: #7A5AF8;

    .badge-icon {
        background: #BDB4FE;
    }
}

.status5 {
    background-color: #F79009;

    .badge-icon {
        background: #FEC84B;
    }
}
</style>